import React from 'react';
import ReactDOM from 'react-dom';
import {
    Container,
    Grid,
    Col,
    Button,
} from 'amazeui-touch';

export default class Item extends React.Component {
    constructor(props) {
        super(props);
    }
    order(id){
        window.location = `order.html?id=${id}`;
    }
    render() {
        return (
            <Container>
                {this.props.list.map((item, index)=>{
                    let background = {
                        backgroundImage: 'url(' + require('../img/' + item.background) + ')',
                        backgroundSize: 'cover',
                        backgroundRepeat: 'no-repeat',
                        backgroundPosition: 'center top'
                    };
                    return (
                        <Grid key={index} className="item" style={background}>
                            <Col cols={4} offset={2}>
                                <h4>{item.title}</h4>
                                <h5>{item.description}</h5>
                                <h6>{item.features}</h6>
                                <Button amStyle="alert" amSize="sm" block onClick={this.order.bind(this, item.id)}>订购</Button>
                            </Col>
                        </Grid>
                    )
                })}
            </Container>
        );
    }
}
